<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="<?=base_url()?>assets/default/js/gmap3.min.js"></script>
<script type="text/javascript" src="<?=site_url("home/associations_aray")?>"></script>

<script type="text/javascript">
	$(document).ready(function() { 
	
	    $('#map_canvas').gmap3(
		    {action: 'init',
		      options:{
		        center:[33.596319,9.162598],
		        zoom: 6,
		        mapTypeId: google.maps.MapTypeId.TERRAIN
		      }
		    },
		    {action: 'addMarkers',
		      //radius:100,
		      markers: associationsList,
		      /*clusters:{
		        // This style will be used for clusters with more than 0 markers
		        0: {
		          content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
		          width: 53,
		          height: 52
		        },
		        // This style will be used for clusters with more than 20 markers
		        20: {
		          content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
		          width: 56,
		          height: 55
		        },
		        // This style will be used for clusters with more than 50 markers
		        50: {
		          content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
		          width: 66,
		          height: 65
		        }
		      },*/
		      marker: {
		        options: {
		          icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
		        },
		        events:{
			        mouseover: function(marker, event, data){
			          var map = $(this).gmap3('get'),
			              infowindow = $(this).gmap3({action:'get', name:'infowindow'});
			          var infoContent = '<b>Name:</b> '+data.raison_social+'<br/>'+
			          					'<b>Address:</b> '+data.adresse;
			          
			          if (infowindow){
			            infowindow.open(map, marker);
			            infowindow.setContent(infoContent);
			          } else {
			            $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: infoContent}});
			          }
			        },
			        mouseout: function(){
			          var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
			          if (infowindow){
			            infowindow.close();
			          }
			        }
			      }
		      }
		    }
		  );
  
	}); 
</script>


<div class="easyui-layout" style="width:100%;height:1000px;">
	<div region="north" style="overflow:hidden;height:70px;padding-left:25px;">
		<table align="left">
			<tr>
				<td>
					<img src="<?= base_url()?>assets/default/images/home/home.png"/>
				</td>
				<td valign="middle">
					<h1>Home</h1>
				</td>
			</tr>
		</table>
	</div>
	<div region="south" split="true" style="height:50px;background:#fafafa;">
	</div>
	<div region="east" title="Extra" split="true" style="width:250px;padding:10px;">
		<?= $login?>
	</div>
	<div region="west" split="true" title="Navigation" style="width:200px;">
		<?= $navigation?>
	</div>
	<div region="center" title="Content" style="background:#fafafa;padding:10px;">
		
		
<div id="win" class="easyui-panel" title="Associations map" style="padding:10px;">

        <div id="map_canvas" style="width: 500px; height: 500px;margin: auto;"></div>
</div>		
		
	</div>
</div>






